﻿<script setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '../stores/auth';
import { createCourseTask, fetchCourses } from '../api/demo';

const authStore = useAuthStore();

const formRef = ref();
const loading = ref(false);
const courses = ref([]);
const courseLoading = ref(false);

const form = reactive({
  parentid: '',
  title: '',
  body: '',
});

const rules = {
  parentid: [{ required: true, message: '请选择所属课程', trigger: 'change' }],
  title: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
  body: [{ required: true, message: '请输入任务内容', trigger: 'blur' }],
};

const handleSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async (valid) => {
    if (!valid) return;
    try {
      loading.value = true;
      await createCourseTask({
        parentid: form.parentid,
        title: form.title,
        body: form.body,
        userid: authStore.user?.id,
      });
      ElMessage.success('课程任务添加成功');
      handleReset();
    } catch (error) {
      ElMessage.error(error?.message || '新增任务失败，请稍后重试');
    } finally {
      loading.value = false;
    }
  });
};

const handleReset = () => {
  formRef.value?.resetFields();
};

const loadCourses = async () => {
  try {
    courseLoading.value = true;
    courses.value = await fetchCourses();
  } catch (error) {
    ElMessage.error(error?.message || '加载课程列表失败，请稍后重试');
  } finally {
    courseLoading.value = false;
  }
};

onMounted(() => {
  loadCourses();
});
</script>

<template>
  <div class="page-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <div>
            <h2>新增课程任务</h2>
            <p>课程任务用于引导学生分阶段完成学习目标，至少包含两个任务项才更合理。</p>
          </div>
        </div>
      </template>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" size="large">
        <el-form-item label="所属课程" prop="parentid">
          <el-select v-model="form.parentid" placeholder="请选择课程" filterable :loading="courseLoading">
            <el-option
              v-for="course in courses"
              :key="course.id"
              :label="course.title"
              :value="course.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称" prop="title">
          <el-input v-model="form.title" maxlength="80" show-word-limit placeholder="请输入任务标题" />
        </el-form-item>
        <el-form-item label="任务内容" prop="body">
          <el-input
            v-model="form.body"
            type="textarea"
            :rows="4"
            maxlength="2000"
            show-word-limit
            placeholder="请描述任务步骤、提交方式、截止要求等"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleSubmit">提交保存</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.page-container {
  max-width: 900px;
  margin: 0 auto;
}

.card-header h2 {
  font-size: 24px;
  margin-bottom: 4px;
}

.card-header p {
  color: #666;
}
</style>
